<template>
  <div>
    <template v-for="item in routers" :key="item.id">
      <el-sub-menu v-if="item?.children && item?.children?.length > 0" :index="item?.route || item?.id">
        <template #title>
          <el-icon><grid /></el-icon>
          <span v-show="permissionStore.isExpand">{{ item.menuName }} </span>
        </template>
        <side-nav v-if="item?.children" :routers="item.children" />
      </el-sub-menu>
      <el-menu-item v-else :index="item?.route || item?.id">
        <el-icon><setting /></el-icon>
        <template #title>
          <span>{{ item.menuName }}</span>
        </template>
      </el-menu-item>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { Grid, Setting } from '@element-plus/icons-vue';

import { usePermissionStore } from '@/store';

defineProps<{
  routers: any[];
}>();

const permissionStore = usePermissionStore();
</script>

<style scoped lang="scss">
.side-nav {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
</style>
